<template>
  <div class="container">
    <div class="box1">
      <ul>
        <!-- <li v-for="(item,index) in lrc"  -->
        <li v-for="(item,index) in result"
            :class="colorHover===index?'lrcHighLight':'lrcDefault'"
            :key="index" @mousedown="mousedown(index,item)">
          {{ item.words }}
        </li>
      </ul>
    </div>

    <div class="box2">
      <audio
          controls
          ref="audio"
          @timeupdate="timeUpdate"
          @ended="overAudio"
          @pause="onPause"
          @play="onPlay"
      >
        <source src="@/assets/music.m4a" type="audio/mpeg"/>
      </audio>
    </div>

  </div>


</template>

<script>
import {lrc} from '@/assets/song.js';

export default {
  name: "test",
  data() {
    return {
      result: [], // 歌词时间对象
      audio: this.$refs.audio,
      doms: {},
      colorHover: 0
    };
  },
  created() {
    // 解析歌词并渲染
    this.parseLrc();
  },

  computed: {
    // audioCurrentTime(){
    //   var _this = this;
    //   this.$nextTick(() => {
    //     alert(_this.$refs.audio.currentTime);
    //     // return document.querySelector('audio').currentTime;
    //     return _this.$refs.audio.currentTime;
    //   })
    // }
  },
  watch: {
    // audioCurrentTime(oldTime, newTime) {

    //   console.log(1);
    //   this.findIndex();
    // }
  },
  mounted() {
    // this.addEventListeners();
    // this.$refs.audio.addEventListener('timeupdate', this.setOffset());
    this.doms = {
      audio: this.$refs.audio,
      ul: this.$el.querySelector(".container ul"),
      container: this.$el.querySelector('.container'),
    }
    // 播放器默认音量，最大音量1
    this.$refs.audio.volume = 0.25;
  },
  methods: {
    // addEventListeners: function () {
    //     this.$refs.audio.addEventListener('timeupdate', this.setOffset());
    //   },

    // addEventListeners: function () {
    //     const audio = this.$refs.audio;
    //     self.$refs.audio.addEventListener('timeupdate', audio.currentTime)
    //     // self.$refs.player.addEventListener('canplay', audio.durationTime)
    // },

    /** 解析歌词字符串
     * 得到一个歌词对象的数组
     * 每句歌词对象：
     * {time: 开始时间, words: 歌词}
     */
    parseLrc() {
      var lines = lrc.split("\n");
      // 存放所有时间/歌词数组
      this.result = [];
      lines.forEach(item => {
        var parts = item.split("]");
        var timeStr = parts[0].substring(1);

        // this.parseTime(timeStr);
        var obj = {
          time: this.parseTime(timeStr),
          words: parts[1]
        }
        this.result.push(obj);
      })
      // this.createLrcElement();
      return this.result;
    },

    // 原生js添加歌词
    createLrcElement() {
      // 文档片段
      var frag = document.createDocumentFragment();
      for (var i = 0; i < this.result.length; i++) {
        var li = this.$el.createElement("li");
        li.textContent = this.result[i].words;
        frag.append(li);
      }
      this.doms.ul.appendChild(frag);
    },

    /**
     * 将一个时间字符串解析数字(秒)
     * @param {string} timeStr 事件字符串
     * @return
     */
    parseTime(timeStr) {
      var parts = timeStr.split(":");
      return +parseInt(parts[0]) * 60 + parseInt(parts[1]);
    },

    /**
     * 计算出播放器当前播放时间应该高亮哪句歌词的下标
     *
     */
    findIndex() {
      var lrcTime = this.result;
      // DOM上绑定的src属性无法立即更新
      // var curTime = document.querySelector('audio').currentTime;
      var curTime = this.$refs.audio.currentTime
      for (var i = 0; i < lrcTime.length; i++) {
        // console.log('播放器当前时间', curTime)
        // console.log('歌词时间', lrcTime[i].time)
        if (curTime < lrcTime[i].time) {
          // console.log(lrcTime[i].words);
          return i - 1;
        }
      }
      // 如果遍历完没有歌词,说明播放到最后一句了
      return lrcTime.length - 1;
    },

    test() {
      // 容器高度
      var containerHeight = this.doms.container.clientHeight;
      // 每个 li 的高度
      var liHeight = this.doms.ul.children[0].clientHeight;

    },

    /**
     * 设置 Ul 的偏移量
     */
    setOffset() {
      // 容器高度
      // var containerHeight = this.doms.container.clientHeight;
      // // 每个 li 的高度
      // var liHeight = this.doms.ul.children[0].clientHeight;
      var index = this.findIndex();
      this.colorHover = index;
      // alert(index)
      // var offset = liHeight * index + liHeight / 2 - containerHeight / 2;
      // if(offset < 0){
      //   offset = 0;
      // }
      // if(offset > maxOffset){
      //   offset = maxOffset;
      // }

      // this.doms.ul.style.transform = `translateY(-${offset}px)`;
      // // 去掉之前的 active 的样式
      // var li = this.doms.ul.querySelector('.active');
      // if(li){
      //   li.classList.remove('active');
      // }
      //  li = this.doms.ul.children[index];
      // if(li){
      //   li.classList.add('active');
      // }
    },
    // 监听播放器时间
    timeUpdate() {
      this.setOffset();
    },
    // 当音频播放
    onPlay() {
      console.log('开始播放声音');
    },
    // 当音频暂停
    onPause() {
      console.log('暂停播放声音');
    },
    //播放完毕执行
    overAudio() {
      console.log('播放声音完毕');
    },
    mousedown(index, item) {
      console.log(this.$refs.audio);
      this.$refs.audio.currentTime = item.time;
      this.timeUpdate();
    },
  }
};
</script>
<style scoped>
.box1 {
  display: flex;
  justify-content: center;
  height: 90%;
}

.box2 {
  display: flex;
  justify-content: center;
  height: 10%;
  bottom: -12px;
  background-color: #000;
  box-shadow: 0 -10px 20px #403f3f;
}

ul {
  list-style-type: none;
  height: 90%;
  overflow-y: scroll;
  scrollbar-width: none;
}

li {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
}

.container {
  height: 80vh;
  background: #708090;
}
</style>
      
      
